{% extends "base.html" %}

{% block title %}
    School Dashboard | Service Performance Reporting Portal
{% endblock %}


{% block content %}

    <!-- PAGE HEADER -->

    <div class="page-header">

        <h1 class="page-title">
            Welcome
            {% if current_user.school %}
                {{ current_user.school.name }}
            {% else %}
                {{ current_user.username }}
            {% endif %}
        </h1>

        <p class="page-subtitle">
            Manage and submit your monthly service performance reports.
        </p>

    </div>



    <!-- STATISTICS -->

    <section class="stats">


        <div class="stat-card">

            <div class="stat-top">

                <span class="stat-title">
                    Total Reports
                </span>

                <div class="stat-icon">
                    <i class="fa-solid fa-file-lines"></i>
                </div>

            </div>

            <div class="stat-number">
                {{ reports|length }}
            </div>

        </div>


        <div class="stat-card">

            <div class="stat-top">

                <span class="stat-title">
                    Ready for Download
                </span>

                <div class="stat-icon">
                    <i class="fa-solid fa-download"></i>
                </div>

            </div>

            <div class="stat-number">

                {{ reports|selectattr("status", "equalto", "prepared")|list|length }}

            </div>

        </div>


        <div class="stat-card">

            <div class="stat-top">

                <span class="stat-title">
                    Submitted
                </span>

                <div class="stat-icon">
                    <i class="fa-solid fa-cloud-arrow-up"></i>
                </div>

            </div>

            <div class="stat-number">

                {{ reports|selectattr("status", "equalto", "submitted")|list|length }}

            </div>

        </div>


    </section>



    <!-- MAIN CONTENT -->

    <div class="content-grid">


        <!-- RECENT REPORTS -->

        <section class="card">

            <div class="card-header">

                <h2>
                    My Reports
                </h2>

                <a
                    href="{{ url_for('reports') }}"
                    class="view-all"
                >
                    View All
                </a>

            </div>


            {% if reports %}

                <div class="report-list">

                    {% for report in reports[:5] %}

                        <div class="report-item">


                            <div class="report-info">

                                <h3>
                                    {{ report.reporting_period }}
                                </h3>

                                <p>
                                    Created
                                    {{ report.created_at.strftime("%d %b %Y") }}
                                </p>


                                {% if report.status == "generated" %}

                                    <span class="status status-generated">
                                        Generated
                                    </span>


                                {% elif report.status == "prepared" %}

                                    <span class="status status-prepared">
                                        Ready for Download
                                    </span>


                                {% elif report.status == "submitted" %}

                                    <span class="status status-submitted">
                                        Submitted
                                    </span>


                                {% elif report.status == "reviewed" %}

                                    <span class="status status-reviewed">
                                        Reviewed
                                    </span>


                                {% elif report.status == "rejected" %}

                                    <span class="status status-rejected">
                                        Rejected
                                    </span>

                                {% endif %}

                            </div>



                            <div class="report-action">


                                {% if report.status == "prepared" %}

                                    <a
                                        href="{{ url_for('download_report', report_id=report.id) }}"
                                        class="button button-success"
                                    >

                                        <i class="fa-solid fa-download"></i>

                                        Download

                                    </a>


                                {% elif report.status == "submitted" %}

                                    <span class="button button-secondary">

                                        <i class="fa-solid fa-clock"></i>

                                        Awaiting Review

                                    </span>


                                {% elif report.status == "reviewed" %}

                                    <span class="button button-secondary">

                                        <i class="fa-solid fa-circle-check"></i>

                                        Reviewed

                                    </span>


                                {% elif report.status == "rejected" %}

                                    <a
                                        href="{{ url_for('download_report', report_id=report.id) }}"
                                        class="button button-success"
                                    >

                                        <i class="fa-solid fa-download"></i>

                                        Download

                                    </a>


                                {% else %}

                                    <span class="button button-secondary">
                                        Not Ready
                                    </span>

                                {% endif %}


                            </div>


                        </div>

                    {% endfor %}

                </div>


            {% else %}

                <div class="empty">

                    <i class="fa-regular fa-folder-open"></i>

                    <p>
                        No reports are available yet.
                    </p>

                </div>

            {% endif %}

        </section>



        <!-- QUICK ACTIONS -->

        <section class="card">

            <div class="card-header">

                <h2>
                    Quick Actions
                </h2>

            </div>


            <div class="quick-actions">


                <a
                    href="{{ url_for('reports') }}"
                    class="quick-action"
                >

                    <i class="fa-solid fa-file-lines"></i>

                    <span>
                        View My Reports
                    </span>

                </a>


                {% set prepared_count = reports|selectattr("status", "equalto", "prepared")|list|length %}

                {% if prepared_count > 0 %}

                    <a
                        href="{{ url_for('reports') }}"
                        class="quick-action"
                    >

                        <i class="fa-solid fa-download"></i>

                        <span>
                            Download Ready Report
                        </span>

                    </a>

                {% endif %}


                {% set submitted_count = reports|selectattr("status", "equalto", "submitted")|list|length %}

                {% if submitted_count > 0 %}

                    <div class="quick-action">

                        <i class="fa-solid fa-clock"></i>

                        <span>
                            Report Awaiting Review
                        </span>

                    </div>

                {% endif %}


            </div>

        </section>


    </div>

{% endblock %}